<template>
    <sub-box>
        <breadcrumb :title="'合作单位详情'"></breadcrumb>
        <div class="white-block manager" v-loading="loading">
            <el-form class="form-common" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="1.3rem">
                <el-form-item label="单位LOGO" prop="fileList">
                    <upload :fileList.sync="ruleForm.fileList" :listType="'picture'" @change="change" ref="fileListRef"></upload>
                </el-form-item>
                <el-form-item label="单位名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="页面链接" prop="path">
                    <el-input v-model="ruleForm.path"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="displayStatus">
                    <el-select v-model="ruleForm.displayStatus" placeholder="请选择" class="openWay">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="text-center btns">
                    <el-button type="primary" size="large" @click="save('ruleForm')">保存</el-button>
                    <el-button size="large" @click="$router.back(-1)">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </sub-box>
</template>

<script>
    import subBox from '../../components/layout/layout-sub'
    import breadcrumb from '../../components/breadcrumb'
    import upload from '../../components/upload'

    export default {
        name: '',
        data() {
            let fileChange = (rule, value, callback) => {
                if (!value[0]) {
                    return callback(new Error('请上传图片'))
                } else {
                    callback()
                }
            }
            return {
                ruleForm: {
                    name: '',
                    fileList: [],
                    displayStatus: 0,
                    path: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入单位名称', trigger: 'blur'}
                    ],
                    fileList: [
                        {required: true, validator: fileChange, trigger: 'change'}
                    ]
                },
                options: [
                    {
                        value: 0,
                        label: '显示'
                    },
                    {
                        value: 1,
                        label: '隐藏'
                    }
                ],
                loading: false,
                id: null
            }
        },
        mounted() {
            this.id = this.$route.params.id
            if (this.id) this.getDetail()
        },
        methods: {
            change(file, fileList) {
                this.ruleForm.fileList = fileList.slice(-1)
                this.$refs.ruleForm.validateField('fileList')
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },
            save(formName) {
                this.validate(formName, () => {
                    this.loading = true
                    this.$http.post('/gsCooperationUnit/saveOrUpdate', {
                        cooperationUnit: this.ruleForm.name,
                        logoImgUrl: this.ruleForm.fileList[0] ? this.ruleForm.fileList[0].id : '',
                        id: this.id || '',
                        pageLink: this.ruleForm.path,
                        openType: 1,
                        displayStatus: this.ruleForm.displayStatus
                    }).then(result => {
                        this.loading = false
                        if (result.success) {
                            this.$emit('upload')
                            this.$nextTick(() => {
                                this.$method.historyBack()
                            })
                        }
                    }).catch(() => {
                        this.loading = false
                    })
                })
            },
            getDetail() {
                this.$http.get('/gsCooperationUnit/getById', {
                    id: this.id
                }).then(result => {
                    if (result.success) {
                        this.ruleForm.name = result.data.cooperationUnit
                        this.ruleForm.displayStatus = result.data.displayStatus
                        this.ruleForm.path = result.data.pageLink
                        if (result.data.fileInfo) this.ruleForm.fileList.push(result.data.fileInfo)
                    }
                    this.$method.updateView(false, true)
                })
            }
        },
        components: {
            subBox,
            breadcrumb,
            upload
        }
    }
</script>

<style scoped lang="less">
    .manager {
        padding-top: 1rem;
        padding-bottom: 2rem;
    }

    .form-common {
        width: 6.4rem;
        margin: 0 auto;
    }

    .openWay {
        width: 100%;
    }
</style>
